<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'

const wrapperStyle = ref({})
const theme = ref(1)

function debounce(fn: Function, delay: number) {
  let timer: any = null
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(fn, delay)
  }
}
const props = defineProps({
  theme: {
    type: Number,
    default: 1,
  },
  width: {
    type: Number,
    default: 1920,
  },
  height: {
    type: Number,
    default: 1080,
  },
  scale: {
    type: Number,
    default: 1,
  },
  scaleType: {
    type: String,
    default: 'contain',
  },
  scaleWidth: {
    type: Number,
    default: 1920,
  },
  scaleHeight: {
    type: Number,
    default: 1080,
  },
  scaleTop: {
    type: Number,
    default: 0,
  },
  scaleLeft: {
    type: Number,
    default: 0,
  },
  scaleRight: {
    type: Number,
    default: 0,
  },
  autoScale: {
    type: Boolean,
    default: true,
  },
  fullScreen: {
    type: Boolean,
    default: true,
  },
})
const currentWidth = ref(0)
const currentHeight = ref(0)
const originalWidth = ref(0)
const originalHeight = ref(0)
const onResize = ref()
const screenWrapper = ref()
function initSize() {
  return new Promise((resolve: any) => {
    screenWrapper.value.parentNode.style.overflow = 'hidden'
    screenWrapper.value.parentNode.scrollLeft = 0
    screenWrapper.value.parentNode.scrollTop = 0
    const { width, height } = props
    originalWidth.value = window.screen.width
    originalHeight.value = window.screen.height
    nextTick(() => {
      currentWidth.value = width || screenWrapper.value.clientWidth
      currentHeight.value = height || screenWrapper.value.clientHeight
      console.log(currentWidth.value, currentHeight.value)

      resolve()
    })
  })
}
function updateSize() {
  //有宽高时，按照宽高缩放,无宽高时，按照屏幕值缩放
  if (currentWidth.value || currentHeight.value) {
    screenWrapper.value.style.width = currentWidth.value + 'px'
    screenWrapper.value.style.height = currentHeight.value + 'px'
  } else {
    screenWrapper.value.style.width = originalWidth.value + 'px'
    screenWrapper.value.style.height = originalHeight.value + 'px'
  }
}
function updateScale() {
  const screenCon = screenWrapper.value
  // 获取真实视口尺寸
  const Wt = document.body.clientWidth
  const Ht = document.body.clientHeight
  console.log(Wt, Ht)

  // 获取缩放比例
  const realWidth = currentWidth.value || screenCon.clientWidth
  const realHeight = currentHeight.value || screenCon.clientHeight

  const widthScale = Wt / realWidth
  const heightScale = Ht / realHeight
  // 若要铺满全屏，则按照各自比例缩放
  if (props.fullScreen) {
    screenWrapper.value.style.transform = `scale(${widthScale},${heightScale})`
    return false
  } else {
    //TODO 未完待续
    const scale = Math.min(realWidth / Wt, realHeight / Ht)
  }
}
async function resize() {
  await initSize()
  updateSize()
  updateScale()
}
function addListener() {
  onResize.value = debounce(resize, 100)
  window.addEventListener('resize', onResize.value)
}
function removeListener() {
  window.removeEventListener('resize', onResize.value)
}
onMounted(() => {
  addListener()
})
onUnmounted(() => {
  removeListener()
})
</script>
<template>
  <div
    class="screen-wrapper"
    :class="theme == 1 ? 'default' : 'dark'"
    ref="screenWrapper"
    :style="wrapperStyle"
  >
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.screen-wrapper {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  position: relative;
  overflow: hidden;
  z-index: 100;
  transform-origin: left top;

  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
